'use client'

import {cn} from "@/lib/utils"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

import {ModeToggle} from "@/components/mode-toggle"
import {z} from "zod"
import {zodResolver} from "@hookform/resolvers/zod"
import {useForm} from "react-hook-form"
import {Button} from "@/components/ui/button"
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import {Input} from "@/components/ui/input"
import {SignupFormSchema} from "@/lib/definitions"
import Link from "next/link";
import {useRouter} from 'next/navigation'
import {useToast} from "@/hooks/use-toast"
import request from "@/lib/request";

export function LoginForm({
                              className,
                              ...props
                          }: React.ComponentPropsWithoutRef<"div">) {
    const router = useRouter()

    const {toast} = useToast()


    const form = useForm<z.infer<typeof SignupFormSchema>>({
        resolver: zodResolver(SignupFormSchema),
        defaultValues: {
            email: "",
            password: "",
        },
    })

    function onSubmit(values: z.infer<typeof SignupFormSchema>) {
        // Do something with the form values.
        // ✅ This will be type-safe and validated.
        request("/api/auth/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(values),
        }).then((res: ApiResponse) => {
            if (res.success) {
                router.push("/")
            }
            if (!res.success) {
                toast({
                    variant: "destructive",
                    title: "登陆失败",
                    description: res.message,
                })
            }
        })
    }


    return (
        <div className={cn("flex flex-col gap-6", className)} {...props}>
            <Card>
                <CardHeader>
                    <CardTitle className="text-2xl">登陆</CardTitle>
                    <CardDescription>
                        输入您的Email以登录您的帐户
                    </CardDescription>
                </CardHeader>
                <CardContent>

                    <Form {...form}>
                        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
                            <FormField
                                control={form.control}
                                name="email"
                                render={({field}) => (
                                    <FormItem>
                                        <FormLabel className="font-bold">Email</FormLabel>
                                        <FormControl>
                                            <Input
                                                type="email"
                                                placeholder="m@example.com"
                                                {...field}
                                                required
                                            />
                                        </FormControl>

                                        <FormMessage/>

                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="password"
                                render={({field}) => (
                                    <FormItem>
                                        <FormLabel className="w-full flex items-center">
                                            <div className="font-bold">密码</div>
                                            <a
                                                href="#"
                                                className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                                            >
                                                忘记密码?
                                            </a>
                                        </FormLabel>
                                        <FormControl>
                                            <Input
                                                type="password"
                                                {...field}
                                                required
                                            />
                                        </FormControl>
                                        <FormMessage/>
                                    </FormItem>
                                )}
                            />

                            <Button type="submit" className="w-full">登陆</Button>
                            <div className="mt-4 text-center text-sm">
                                暂无账号?{" "}
                                <Link
                                    href="/register"
                                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                                >
                                    去注册
                                </Link>
                            </div>
                        </form>
                    </Form>

                </CardContent>
            </Card>
            {/* 主题色切换按钮 */}
            <div className="absolute top-2 right-2">
                <ModeToggle/>
            </div>

        </div>
    )
}
